<template>
  <van-cell center title="灵犀感应">
    <template #right-icon>
      <van-switch v-model="isMatchMode" size="24"/>
    </template>
  </van-cell>
  <UserCardList :userList="userList" :loading="loading"/>
</template>

<script setup lang="ts">
import { watchEffect} from "vue";
import {ref} from 'vue';
import myAxios from "../../plugins/myAxios.ts";
// 引入css
import 'vant/es/toast/style';
import 'vant/es/notify/style'
import {showSuccessToast} from 'vant';
import UserCardList from "../../global/UserCardList.vue";
import type {UserType} from "../../models/user";

const userList = ref([]);
// onMounted(async () => {
//   const userList_ = await myAxios.get('/user/recommend', {
//     params: {
//       pageSize: 10,
//       pageNum: 1,
//     },
//   })
//       .then(res => {
//         showSuccessToast('获取成功');
//         return res?.data.records;
//       })
//       .catch(err => {
//         showFailToast('获取失败');
//         console.log(err);
//       })
//   if (userList_) {
//     userList_.forEach((user: any) => {
//       if (user.tags) {
//         user.tags = JSON.parse(user.tags);
//       }
//     })
//     userList.value = userList_;
//   }
// })

const isMatchMode = ref<boolean>(false);

const loading = ref(true);
/**
 * 加载数据
 */
const loadData = async () => {
  loading.value = true;
  let userListData;
  // 心动模式，根据标签匹配用户
  if (isMatchMode.value) {
    const num = 10;
    userListData = await myAxios.get('/user/match', {
      params: {
        num,
      },
    })
        .then(function (response) {
          console.log('/user/match succeed', response);
          return response?.data;
        })
        .catch(function (error) {
          console.error('/user/match error', error);
          showSuccessToast('请求失败');
        })
  } else {
    // 普通模式，直接分页查询用户
    userListData = await myAxios.get('/user/recommend', {
      params: {
        pageSize: 8,
        pageNum: 1,
      },
    })
        .then(function (response) {
          console.log('/user/recommend succeed', response);
          return response?.data?.records;
        })
        .catch(function (error) {
          console.error('/user/recommend error', error);
          showSuccessToast('请求失败');
        })
  }
  if (userListData) {
    userListData.forEach((user: UserType) => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
  loading.value = false;
}

watchEffect(() => {
  loadData();
})

</script>

<style scoped>


</style>